<template>
    <!-- 总盒子 -->
    <scroll-view  class="scroll-content"
     scroll-y

	 refresher-enabled="true"
     style="height: 100vh;"
	 bindrefresherrefresh="onPullDownRefresh"
	 :refresher-triggered="triggered"
     @scrolltolower="onScrollToLower">
	<view style="z-index: 0; width: 100%; height: 400rpx; position: fixed; background: linear-gradient(#C1E7FC, #ffffff);">
				
	</view>
    <view class="index-page">
        <view class="topbackground"  style="position: relative; z-index: 100;">
			<!-- <image src="../../static/images2/Rectangle 223.png" style="position: absolute; width: 100%;"></image>0 -->
            <view class="header" :style="{ paddingTop: heightConfig.navBarPaddingTop + 'px' }">
				  <view @click="back" style="float:left; position: absolute; margin-left: 30rpx; margin-top: 15rpx; z-index: 1;"><uni-icons type="left" size="25"></uni-icons></view>
                <view class="Narbar_bo" style="position: absolute; ">
                    <view class="title" size="19px">套餐</view>
                    <view></view>
                </view>
           </view>
            <!-- 这里写内容 -->
            <view class="phyExaBgc" style="position: relative; margin-top: 140rpx; width: 100%;">
                <view class="phyExaBgcTop" style="width:100%; height: 100%; ">
      
					<image src="https://www.whjxzfjwsfwzx.cn/prod-api/profile/upload/2025/06/13/type_20250613133444A008.png" style="width: 700rpx;  height: 100%; position: absolute; left: 0;"></image>  
					<text style="position: absolute; left: 20rpx; top: 20rpx;"> 体检项目类型 </text> 
					<view class="box" >
					    <view class="xh"  style="width: 686rpx; ">        <!-- @click="appointMentType(item)"  v-for="(item,index) in examinTypeData" :key="index" -->
					        <view class="list-box"  @click="appointMentType(item)"  v-for="(item,index) in examinTypeData" :key="index">
					             <image class="image" style="border-radius: 50rpx;" :src="url+item.url"></image>
					            <view class="text" >{{item.typeName}}</view>
					        </view>
					
					    </view>
					</view>
                </view>
			
               
            </view>
            <view class="phyExaBgcRecom">
                体检套餐推荐
            </view>
			
            <view class="list" v-for="(item,index) in tiJianLIst" :key="index" @click="projectLIstanbul(item)">
                <view class="one">
                    <image :src="url+item.imagePath.split(',')[0]" style="
                       margin:16rpx 0 0 10rpx;width: 193rpx;
                        height: 150rpx;"></image>
                </view>
                <view class="two" style="margin-left:20rpx;">
                    <view class="center1">
                        {{item.setMealName}}
                    </view>
                    <view class="center2">
                        {{item.subscribeMedicalExamType.description}}
                    </view>
                </view>
                <view class="three">
                    <view class="right1">¥{{item.price}}</view>
                    <view class="right2" >
                        <view class="text">点击预约</view>
                    </view>
                </view>
                <!-- </view> -->
            </view>
             <image  v-if="!tiJianLIst.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
          </view>
    </view>
  </scroll-view>
</template>

<script>
		import {baseUrl} from "@/config.js"
    import mine from "@/api/mine" 
    export default {
        data() {
            return {
				examinTypeData:[],
                tiJianLIst:[ ],
                imgUrlList:['../../static/images2/setmea1.png','../../static/images2/setmea2.png','../../static/images2/setmea3.png','../../static/images2/setmea4.png','../../static/images2/setmea5.png'],
                heightConfig: {},
                isHot:0,
				url:"",
				height:"",
				pageNum:1,
				triggered:false
            };
        },
        onLoad(query) {
            this.mainHeight = this.$store.getters.heightData.noTabMainHeight;
            this.heightConfig = this.$store.getters.heightData;
            
        },
        mounted(){
			  this.url = baseUrl
			  this.getType()
			  this.getPackagList()
			  this.$nextTick(()=>{
			  		this.height = "100vh"
			  })
		},
        onShow() {
        },
        async onPullDownRefresh() {
			console.log("下拉了")
			  this.triggered = true
        	   await this.getType()
			   await this.getPackagList()
				this.triggered = false
        },
        methods: {
			onScrollToLower(){
				console.log("触底了")
				 this.pageNum++;
				 this.getPackagList({pageNum:this.pageNum})
			},
			isLogin(){
					  if(uni.getStorageSync('token'))
					   {
						  return true
					   }else{
						     this.$u.toast("请先登录")  
						  return false
					   }
			},
		   async getType(){
				let res = await mine.getExameTypeList()
				this.examinTypeData = res.rows
			
			},
			async getPackagList(data){
				  //如果要获取热门就将this.isHot = 1
				  //this.isHot = 1
				 let res = await mine.getPackagesList({isHot:this.isHot,pageNum:this.pageNum})
			     if(res.total<=this.tiJianLIst.length) return
			     // / this.tiJianLIst = res.rows
			      this.tiJianLIst = [...this.tiJianLIst, ...res.rows];
				
			},
			appointMentType(item) {
					if(!this.isLogin()) return 
			    uni.navigateTo({
			      url: `/subPages/chiPhyExaP/chiPhyExaP?data=${encodeURIComponent(JSON.stringify(item))}`
			    })
			},
			projectLIstanbul(item){
					if(!this.isLogin()) return 
				 uni.navigateTo({
				   url: `/subPages/meaDetail/meaDetail?data=${encodeURIComponent(JSON.stringify(item))}`
				 })
			},
            // 预约
            project() {
                uni.navigateTo({
                    url: "/subPages/phyExaRep/phyExaRep",
                })
            },
            appointMent() {
                uni.navigateTo({
                    url: "/subPages/chiPhyExaP/chiPhyExaP",
                })
            },
			back(){
				 //返回
				uni.switchTab({
				  url: "/pages/index/index",
				});

			}
         },
    };
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
        // height: 100vh;overflow-y: scroll;
    }

    .topbackground {
        width: 100%;
    
	  
        background-size: 100% 100%;
    }

    .index-page {
// height: 100vh;overflow-y: scroll;
        width: 750rpx;
     
        background: #F7F8FA;
        box-sizing: border-box;
        // display: flex;
		overflow: hidden;
        // align-items: center;
        // flex-direction: column;
        // background-color: #fff;
      
        

        .Narbar_bo {
            width: 100%;
            height: 35px;
            display: flex;
            padding: 0 28rpx;
            justify-content: center;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
    .phyExaBgc{
        // margin:38rpx  0 0 rpx;
        margin-left: 40rpx;
        height: 386rpx;
        width: 686rpx;
        
        background-size: 100% 100%;
        // border:1rpx solid black;
    }
    .phyExaBgcTop{
        white-space: nowrap;

       font-family: PingFang SC, PingFang SC;
       font-weight: 550;
       font-size: 28rpx;
       color: #255272;
       text-align: center;
       font-style: normal;
       text-transform: none;
    }
    
    .box {
        display:flex;
        position: absolute;
	 
     
        margin-left: 15rpx;
        margin-top:26rpx;
        .xh {
            margin-top: 28rpx;
            flex: 1;
            
			width: 100%;
		
            display: flex;
			  flex-wrap: wrap;
            .list-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
				padding-left: 20rpx;
                width: 156rpx;
				margin-top: 20rpx;
				
                height: 124rpx;
                // background-color: #ffffff;
                // margin-bottom: 30rpx;
                border-radius: 22rpx;
              
                .text {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 8rpx;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    color: #333333;
   
                }
    
                .image {
                    height: 72rpx;
                    width: 72rpx;
                }
            }
        }
    }
    .phyExaBgcRecom{
        margin:32rpx 0 0 40rpx;
        width: 192rpx;
        height: 44rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    
    .list {
        display: flex;
        margin: 32rpx 32rpx 0;
        // border: 1rpx solid black;
        width: 686rpx;
        height: 190rpx;
        background: #F8FCFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
    
    .onge {
        width: 193rpx;
        height: 150rpx;
        background: #F6F6F6;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
    
        image {
            width: 193rpx;
            height: 150rpx;
        }
    }
    
    .center1 {
        margin-top: 24rpx;
        // width: 114rpx;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 550;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    
    .center2 {
        margin-top: 10rpx;
        width: 323rpx;
        height: 68rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    
    .right1 {
        margin: 38rpx 0rpx 0 25rpx;
        width: 110rpx;
        height: 36rpx;
        font-family: Douyin Sans, Douyin Sans;
        font-weight: bold;
        font-size: 30rpx;
        color: #EB5432;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    
    .right2 {
    
        margin: 42rpx 0 0 0;
        width: 146rpx;
        height: 52rpx;
        background: #159DFF;
        border-radius: 74rpx 74rpx 74rpx 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .text {
        // text-overflow: ellipsis;
        // white-space: nowrap;
        width: 104rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
</style>